<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 09 - Vue内置指令-事件指令-v-on指令-事件修饰符</title>
</head>
<body>

    <!--第一步：定义vuejs管理渲染的范围-->
    <div id="app">
        <input placeholder="输入enter键"  type="text" @keydown="fun1($event)">
        <input placeholder="输入enter键"  type="text" @keydown.enter="fun2()">
        <input placeholder="输esc键"  type="text" @keydown.esc="fun2()">

        <input placeholder="输入enter键" type="text" @keydown.13="fun2()">
        <input placeholder="ctrl+enter组合触发我" type="text" @keydown.ctrl.enter="fun1($event)">
        <input placeholder="ctrl+enter组合触发我" type="text" @keydown.ctrl.enter="fun2()">
    </div>

    <!-- 第二步：导入vue.js文件 -->
    <script src="js/vuejs-2.5.16.js"></script>    
    <script>

          // 第三步：定义vuejs对象，开始进行视图和数据的渲染
          // 需求：用户按 `enter` 键触发事件
          var app = new Vue({
              el:"#app",
              data:{title:"Hello world!"},
              methods:{
                  fun1:function(d){
                      if(d.keyCode==13) {
                          alert("触发我!!!")
                      }
                  },

                  fun2:function(){
                      alert("触发我!!!func2")
                  }
              }
          }) ;

    </script>
</body>
</html>